import React, {Component} from 'react';
import IceContainer from '@icedesign/container';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
import { Feedback } from '@icedesign/base';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/heatmap';
import 'echarts/lib/component/calendar';
import 'echarts/lib/component/visualMap';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import './Calendar.scss';
import axios from 'axios';
const Toast = Feedback.toast;
/**
 * 贡献度热力图
 *
 * @author zhangby
 * @date 2018/6/15 下午1:49
 */
export default class Calendar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option: {
                tooltip: {
                    formatter: function (params) {
                        return params.value[1] + "个贡献：" + params.value[0];
                    }
                },
                visualMap: {
                    min: 0,
                    max: 10,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'right',
                    top: 150, /*'top'*/
                    color: ['#1e6823', '#44a340', '#8cc665', '#d6e685', '#eee']
                },
                calendar: {
                    top: 30,
                    left: 70,
                    right: 30,
                    cellSize: ['auto', 15],
                    range: ['2017-02-01', '2018-2-1'],
                    itemStyle: {normal: {borderWidth: 0.5}, borderColor: '#1e6823', borderWidth: 0},
                    splitLine: {lineStyle: {color: "#a5a5a5"}},
                    yearLabel: {show: false},
                    monthLabel: {formatter: "{M}月"},
                    dayLabel: {nameMap: "cn"}
                },
                series: {type: 'heatmap', coordinateSystem: 'calendar', data: [],},
            }
        }
    }

    componentDidMount() {
        axios
            .post('/api/getCalendarData')
            .then((response) => {
                this.state.option.series.data = response.data.date;
                this.state.option.calendar.range = response.data.year;
                this.setState({option: this.state.option});
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 绘制图表
                myChart.setOption(this.state.option);
            })
            .catch((error) => {
                Toast.error(error.msg == undefined?"系统错误":error.msg);
            });
    }

    render() {
        return (
            <IceContainer title="近一年接口贡献度" style={{overflowX: 'scroll'}}>
                <div id="main" style={{width: 1000, marginLeft: '5%', height: 200, overflow: 'auto'}}></div>
            </IceContainer>
        );
    }
}
